// 桥接模式

// 例：添加事件交互
// v1 原始方式添加事件
var span = document.getElementById('span');
// 为用户名绑定特效
span[0].onmouseover = function() {
  this.style.color = 'red';
  this.style.background = '#ddd';
};
span[0].onmouseout = function() {
  this.style.color = '#333';
  this.style.background = '#f5f5f5';
};
// 为等级绑定特效
span[1].onmouseover = function() {
  this.getElementByTagName('strong')[0].style.color = 'red';
  this.getElementByTagName('strong')[0].style.background = '#ddd';
};
span[1].onmouseout = function() {
  this.getElementByTagName('strong')[1].style.color = '#333';
  this.getElementByTagName('strong')[1].style.background = '#f5f5f5';
};

// v2 桥接模式添加事件
// 抓取共同点 抽象 桥接模式的桥梁(核心)
function changeColor(dom, color, bg) {
  // 设置元素的字体颜色
  dom.style.color = color;
  // 设置元素的背景颜色
  dom.style.background = bg;
}
var span = document.getElementById('span');
span[0].onmouseover = function() {
  changeColor(this, 'red', '#ddd'); // 桥接模式
};


// 例：利用桥接模式创建多元化对象
// 多维变量类
// 运动单元
function Speed(x, y) {
  this.x = x;
  this.y = y;
}
Speed.prototype.run = function() {
  console.log('运动起来');
}
// 着色单元
function Color(color) {
  this.color = color;
}
Color.prototype.draw = function() {
  console.log('绘制色彩');
}
// 形变单元
function Shape(shape) {
  this.shape = shape;
}
Shape.prototype.change = function() {
  console.log('改变形状');
}
// 说话单元
function Speek(word) {
  this.word = word;
}
Speek.prototype.say = function() {
  console.log('书写字体');
}

// 球
function Ball(x, y, c) {
  // 实现运动单元
  this.speed = new Speed(x, y);
  // 实现着色单元
  this.color = new Color(c);
}
Ball.prototype.init = function() {
  // 实现运动
  this.speed.run();
  // 实现着色
  this.speed.draw();
}
// 人物
function People(x, y, f) {
  this.speed = new Speed(x, y);
  this.font = new Speek(f);
}
People.prototype.init = function() {
  this.speed.run();
  this.font.say();
}
// 精灵
function Spirite(x, y, c, s) {
  this.speed = new Speed(x, y);
  this.color = new Color(c);
  this.shape = new Shape(s);
}
Spirite.prototype.init = function() {
  this.speed.run();
  this.color = draw();
  this.shape.change();
}

var p = new People(10, 12, 16);
p.init();







